import React, { FC } from "react"
import useLoadQuestionData from "../../../hooks/useLoadQuestionData"
import styles from "./index.module.scss"
import EditCanvas from "./c-cpns/EditCanvas"
import { useDispatch } from "react-redux"
import { changeSelectedId } from "../../../store/componentsReducer"
import LeftPanel from "./c-cpns/LeftPanel"
import RightPanel from "./c-cpns/RightPanel"
import EditHeader from "./c-cpns/EditHeader"
import useGetPageInfo from "../../../hooks/useGetPageInfo"
import { useTitle } from "ahooks"

const Edit: FC = () => {
    // const { id = "" } = useParams()
    const { loading } = useLoadQuestionData()
    const { title } = useGetPageInfo()

    // 修改标题
    useTitle(`问卷编辑 - ${title}`)

    const dispatch = useDispatch()

    function clearSelectedId() {
        dispatch(changeSelectedId(""))
    }

    return (
        <div className={styles.container}>
            {/* <div style={{ backgroundColor: "#fff", height: "40px" }}>header</div> */}
            <EditHeader />
            <div className={styles["content-wrapper"]}>
                <div className={styles.content}>
                    <div className={styles.left}>
                        <LeftPanel />
                    </div>
                    <div className={styles.main} onClick={clearSelectedId}>
                        <div className={styles["canvas-wrapper"]}>
                            <EditCanvas loading={loading} />
                        </div>
                    </div>
                    <div className={styles.right}>
                        <RightPanel />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Edit
